<template>
  <div class="dashboard">
    <el-row :span="24" :gutter="20">
      <el-col :span="8">
        <div class="chart-container">
          <div class="center-img">
            <span>健康档案</span>
            <el-tooltip effect="dark" placement="top-start">
              <!-- 使用具名插槽 `content` 来定义 tooltip 的内容 -->
              <template #content>
                <div>
                  建档率：当前的电子健康档案建档率<br />
                  档案使用率：当前的电子健康档案使用率情况
                </div>
              </template>
              <!-- 触发 tooltip 显示的元素 -->
              <img :src="imageSrc" alt="注意图标" style="width: 30px; height: 30px;" />
            </el-tooltip>
          </div>
          <div style="display: flex; justify-content: space-between;" class="chart-item">
            <div style="width: 48%; position: relative;">
              <div id="main1" style="width: 100%; height: 150px;"></div>
              <div class="chart-label">建档率</div>
            </div>
            <div style="width: 48%; position: relative;">
              <div id="main2" style="width: 100%; height: 150px;"></div>
              <div class="chart-label">档案使用率</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="chart-container">
          <div class="center-img">
            <span>家庭签约</span>
            <el-tooltip effect="dark" placement="top-start">
              <!-- 使用具名插槽 `content` 来定义 tooltip 的内容 -->
              <template #content>
                <div>
                  签约率：签约有效人数/辖区人口数*100.00%，签约有效人<br />数即签约周期和所选时间范围有重合的签约记录中，没有出<br />
                  现中途解约的居民数量<br />
                  重点人群签约率：重点人群签约有效人数/辖区重点人群人口<br />*100.00%
                </div>
              </template>
              <!-- 触发 tooltip 显示的元素 -->
              <img :src="imageSrc" alt="注意图标" style="width: 30px; height: 30px;" />
            </el-tooltip>
          </div>
          <div style="display: flex; justify-content: space-between;" class="chart-item">
            <div style="width: 48%; position: relative;">
              <div id="main3" style="width: 100%; height: 150px;"></div>
              <div class="chart-label">签约率</div>
            </div>
            <div style="width: 48%; position: relative;">
              <div id="main4" style="width: 100%; height: 150px;"></div>
              <div class="chart-label">重点人群签约率</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="chart-container">
          <div class="center-img">
            <span>履约情况</span>
            <el-tooltip effect="dark" placement="top-start">
              <!-- 使用具名插槽 `content` 来定义 tooltip 的内容 -->
              <template #content>
                <div>
                  履约率:履约数/签约有效人数，履约数即签约有效人数中所有<br />
                  正常流程服务包均全部履约完成的居民数量。<br />
                  重点人群签约率：当前签约中的人群中，已发生过一次及以<br />
                  上履约的重点人群占比
                </div>
              </template>
              <!-- 触发 tooltip 显示的元素 -->
              <img :src="imageSrc" alt="注意图标" style="width: 30px; height: 30px;" />
            </el-tooltip>
          </div>
          <div style="display: flex; justify-content: space-between;" class="chart-item">
            <div style="width: 48%; position: relative;">
              <div id="main5" style="width: 100%; height: 150px;"></div>
              <div class="chart-label">履约率</div>
            </div>
            <div style="width: 48%; position: relative;">
              <div id="main6" style="width: 100%; height: 150px;"></div>
              <div class="chart-label">重点人群履约率</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="chart-container" style="height: 300px">
          <div class="center-img">
            <img :src="paiming" alt="注意图标" style="width: 30px;height: 30px;" />
            <span>建档率排名</span>
            <el-tooltip effect="dark" placement="top-start">
              <!-- 使用具名插槽 `content` 来定义 tooltip 的内容 -->
              <template #content>
                <div>
                  展示“建档率”及“档案使用率”，并按“建档率”从高到低依次排名展示
                </div>
              </template>
              <!-- 触发 tooltip 显示的元素 -->
              <img :src="imageSrc" alt="注意图标" style="width: 30px; height: 30px;" />
            </el-tooltip>
          </div>
          <div style="display: flex; justify-content: center;" class="chart-item">
            <div style="width: 100%; position: relative;">
              <div id="main8" style="width: 100%; height: 250px;"></div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-container" style="height: 300px">
          <div class="center-img">
            <img :src="paiming" alt="注意图标" style="width: 30px;height: 30px;" />
            <span>签约率排名</span>
            <el-tooltip effect="dark" placement="top-start">
              <!-- 使用具名插槽 `content` 来定义 tooltip 的内容 -->
              <template #content>
                <div>
                  展示“签约率”及“重点人群签约率”，并按“签约率”从高到低依次排名展示
                </div>
              </template>
              <!-- 触发 tooltip 显示的元素 -->
              <img :src="imageSrc" alt="注意图标" style="width: 30px; height: 30px;" />
            </el-tooltip>
          </div>
          <div style="display: flex; justify-content: center;" class="chart-item">
            <div style="width: 100%; position: relative;">
              <div id="main9" style="width: 100%; height: 250px;"></div>
            </div>
          </div>
        </div>
      </el-col>
      <!--      <el-col :span="7" class="chart-container">-->
      <!--        <div>诊疗人次排名</div>-->
      <!--        <div style="display: flex; justify-content: space-between;" class="chart-item">-->
      <!--          <div style="width: 48%; position: relative;">-->
      <!--            <div id="main5" style="width: 100%; height: 200px;"></div>-->
      <!--            <div class="chart-label">建档率</div>-->
      <!--          </div>-->
      <!--          <div style="width: 48%; position: relative;">-->
      <!--            <div id="main6" style="width: 100%; height: 200px;"></div>-->
      <!--            <div class="chart-label">档案使用率</div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </el-col>-->
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="chart-container">
          <div class="center-img">
            <span>近一年新增建档、新增签约数</span>
            <el-tooltip effect="dark" placement="top-start">
              <!-- 使用具名插槽 `content` 来定义 tooltip 的内容 -->
              <template #content>
                <div>
                  展示近12个月的“档案量”及“签约人数”变化趋势
                </div>
              </template>
              <!-- 触发 tooltip 显示的元素 -->
              <img :src="imageSrc" alt="注意图标" style="width: 30px; height: 30px;" />
            </el-tooltip>
          </div>
          <div style="width: 100%; position: relative; margin-top: 10px;">
            <div id="main10" style="width: 100%; height: 200px;"></div>
          </div>
        </div>
      </el-col>
      <!--      <el-col :span="12">-->
      <!--        <div class="chart-container">-->
      <!--          <div class="center-img">-->
      <!--            <span>近一年就诊（门诊、住院）人次</span>-->
      <!--            <img :src="imageSrc" alt="注意图标" style="width: 30px;height: 30px;" />-->
      <!--          </div>-->
      <!--          <div style="width: 100%; position: relative; margin-top: 10px;">-->
      <!--            <div id="main11" style="width: 100%; height: 200px;"></div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </el-col>-->
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import zhuyiImage from '@/assets/images/img/zhuyi.png';
import PaiMing from '@/assets/images/img/paiming.png';
import { getHomeStatistics, getIndexStatictics, getLastYear, getRankings } from '@/api/integration/workbench/index';
import store from '@/store/index';

export default {
  name: 'workbench',
  data() {
    return {
      deptId: store.state.value.user.deptId,
      imageSrc: zhuyiImage,
      paiming: PaiMing,
      chart: null,
      chart1: null,
      chart2: null,
      chart3: null,
      chart4: null,
      chart5: null,
      chart6: null,
      chart7: null,
      chart8: null,
      chart9: null,
      chart10: null,
      chart11: null,
      // 定义具体数据...

      data: {
        'filingRate': '0',
        'useRate': '0',
        'signingRate': '0',
        'focusAgencyRate': '0',
        'performanceRate': '0',
        'focusPerformanceRate': '0',
        'hospitalRate': '0',
        'outpatientRate': '0',
        'numberOfTreatments': 0
      }


    };
  },
  created() {


  },
  mounted() {
    this.getIndexData();
    this.getData();
    this.getRanking();
  },
  methods: {
    initChart(id, chartInstance, option) {
      if (chartInstance) {
        chartInstance.dispose();
      }
      const chartDom = document.getElementById(id);
      if (chartDom) {
        chartInstance = echarts.init(chartDom);
        chartInstance.setOption(option);
        this[id] = chartInstance;
      }
    },
    getOption(data, itemName) {
      const activeColor = '#5DCAA5';  // 绿色，表示有数据
      const defaultColor = '#EEEEEE'; // 灰色，表示无数据或剩余部分

      // 计算百分比并限制为小数点后两位
      const percentage = parseFloat((parseFloat(data)).toFixed(2));
      const remainingPercentage = parseFloat((100 - percentage).toFixed(2));

      // 动态设置name属性
      const pieData = [
        { value: percentage, name: itemName, itemStyle: { color: activeColor } },
        { value: remainingPercentage, name: '未达到率', itemStyle: { color: defaultColor } }
      ];

      return {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {d}%' // 对于提示框，仍然显示所有信息
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['50%', '70%'], // 内外半径，让饼图更像一个圆环
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'center',
              formatter: `${percentage}%`,
              fontSize: '20',
              fontWeight: 'bold'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: pieData // 使用构造的数据项和颜色
          }
        ]
      };
    },
    getOption1(data, itemName) {
      const activeColor = '#5DCAA5';  // 绿色，表示有数据
      const defaultColor = '#EEEEEE'; // 灰色，表示无数据或剩余部分

      // 计算百分比并限制为小数点后两位
      const percentage = parseFloat((parseFloat(data)).toFixed(2));
      const remainingPercentage = parseFloat((100 - percentage).toFixed(2));

      // 动态设置name属性
      const pieData = [
        { value: percentage, name: itemName, itemStyle: { color: activeColor } },
        { value: remainingPercentage, name: '未达到率', itemStyle: { color: defaultColor } }
      ];
      return {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {d}%' // 对于提示框，仍然显示所有信息
        },
        legend: {
          show: false // 隐藏图例以节省空间
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '70%',
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'center',
              formatter: `${percentage}%`,
              fontSize: '20',
              fontWeight: 'bold'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: pieData
          }
        ]
      };
    },

    getWorldPopulationOption(data) {
      return {
        // title: {
        //   text: 'World Population'
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        //图例相关
        legend: {
          bottom: '3%',
          left: 'center',
          data: data.name //与series两个对象中的name对应
        },
        grid: {
          top: '5%',
          left: '2%',
          right: '10%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]

        },
        yAxis: {
          type: 'category',
          data: data.orgName,
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0, //横轴信息全部显示
            formatter: function(value) {
              if (value.length > 7) {
                return `${value.slice(0, 7)}...`;
              }
              return value;
            }
          },
          inverse: false//翻转x轴数据
        },
        dataZoom: [{
          type: 'slider',
          show: true, //flase直接隐藏图形
          yAxisIndex: [0, 1],
          right: '5%', //滚动条靠左侧的百分比
          bottom: '5%',
          top: '5%',
          zoomLock: true,
          startValue: 0,//数据窗口范围的起始数值(绝对数值)。如果设置了dataZoom-inside.start 则startValue失效。
          endValue: 5,
          minSpan: 0,//用于限制窗口大小的最小值（百分比值），取值范围是0 ~ 100。
          maxSpan: 40,
          // 设置背景颜色
          backgroundColor: 'rgb(255, 255, 255)',
          // 设置选中范围的填充颜色
          fillerColor: 'rgb(255, 255, 255)',
          // 设置边框颜色
          borderColor: 'rgb(255, 255, 255)',
          // 是否显示detail，即拖拽时候显示详细数值信息
          showDetail: false,
          //如何触发缩放。
          zoomOnMouseWheel: true,
          //如何触发数据窗口平移。
          moveOnMouseWheel: true,
          // 设置滚动条宽度，相对于盒子宽度
          width: '0.01%',
          // 设置滚动条高度
          height: 150,
          // 控制手柄的尺寸
          handleSize: 0
        }, {
          // 没有下面这块的话，只能拖动滚动条，
          // 鼠标滚轮在区域内不能控制外部滚动条
          type: 'inside',
          yAxisIndex: [0, 1],
          // 滚轮是否触发缩放
          zoomOnMouseWheel: false,
          // 鼠标滚轮触发滚动
          moveOnMouseMove: true,
          moveOnMouseWheel: true
        }],
        series: [
          {
            name: data.name[0],
            type: 'bar',
            data: data.filingRate,
            itemStyle: {
              normal: {
                color: '#5DCAA5'
              }
            }
          },
          {
            name: data.name[1],
            type: 'bar',
            data: data.useRate,
            itemStyle: {
              normal: {
                color: '#F6C630'
              }
            }
          }
        ]
      };
    },
    getMain11Option(data) {
      return {
        //提示框，默认显示
        tooltip: {
          trigger: 'axis',
          axisPointer: {// 坐标轴指示器，坐标轴触发有效
            type: 'line'// 默认为直线，可选为：'line' | 'shadow'
          }
          // 控制提示格式
          // formatter: function(param){
          //     return `${param[0].axisValue}: <br/>${param[0].value}人`
          // }
        },
        //控制直角坐标系与容器上下左右的距离
        grid: {
          left: '5%',
          right: '5%',
          bottom: '15%',
          top: '5%',
          containLabel: true//gid区域是否包含坐标轴的刻度标签。
        },
        //图例相关
        legend: {
          bottom: '3%',
          left: 'center',
          data: ['建档', '签约']//与series两个对象中的name对应
        },
        // x轴（指的是水平的那条线）相关配置
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: data.time,//类目轴数据
            axisLabel: {    // 坐标轴标签
              show: true,  // 是否显示
              inside: false, // 是否朝内
              color: '#000',
              fontSize: 12,
              interval: 0//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
            },
            axisLine: {    // 坐标轴 轴线
              show: true,  // 是否显示
              lineStyle: {
                // color: '#FFFFFF',
                width: 1,
                type: 'solid'
              }
            },
            axisTick: {//刻度相关
              show: false, //是否显示刻度
              alignWithLabel: true//是否对齐标签
            },
            inverse: false//翻转x轴数据
          }
        ],
        // y轴（垂直的那条线）设置
        yAxis: [
          {
            type: 'value',//x轴数据类型，value时就是值，category时就是分类，可用于区分y轴与x轴
            axisLabel: {    // 坐标轴标签
              show: true,  // 是否显示
              // inside: true, // 标签是否朝内,默认false
              interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
              rotate: 0, // 旋转角度
              margin: 5, // 刻度标签与轴线之间的距离
              color: '#000',  // 标签颜色默认取轴线的颜色
              fontSize: 12//标签字号
            },
            splitLine: {    // 网格线
              show: true,  // 是否显示，默认为true
              lineStyle: {
                color: ['#eee'],
                width: 1,
                type: 'solid'
              }
            },
            axisLine: {    // 坐标轴 轴线
              show: true,  // 是否显示,默认false
              lineStyle: {
                // color: '#FFFFFF',//轴线颜色
                width: 1,//轴线宽度
                type: 'solid'//轴线类型
              }
            }
          }
        ],
        series: [
          {
            name: '建档',
            type: 'line',//表明是折线图line
            data: data.totalPut,//值数据，与类型数据一一对应
            itemStyle: {
              normal: {
                color: '#5DCAA5' //折线上的颜色
              }
            },
            // symbol: 'none',//去掉折线图节点
            smooth: true,//是否平滑曲线，true曲线，false直线
            // 区域填充样式
            areaStyle: {
              normal: {
                // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                color: {//分隔区域的颜色
                  x0: 0,
                  y0: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(93,202,165,0.5)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(255,255,255,0.2)' // 100% 处的颜色；中间还可以设置50%、20%、70%时的颜色
                  }],
                  globalCoord: false // 缺省为 false，以确保上面的x,y,x2,y2表示的是百分比
                }
              }
            }
          },
          {
            name: '签约',
            type: 'line',//表明是折线图line
            data: data.SignaturePut,//值数据，与类型数据一一对应
            itemStyle: {
              normal: {
                color: '#AEE6D7' //折线上的颜色
              }
            },
            // symbol: 'none',//去掉折线图节点
            smooth: true,//是否平滑曲线，true曲线，false直线
            // 区域填充样式
            areaStyle: {
              normal: {
                // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                color: {//分隔区域的颜色
                  x0: 0,
                  y0: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(93,202,165,0.2)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(255,255,255,0.2)' // 100% 处的颜色；中间还可以设置50%、20%、70%时的颜色
                  }],
                  globalCoord: false // 缺省为 false，以确保上面的x,y,x2,y2表示的是百分比
                }
              }
            }
          }
        ]
      };
    },
    getIndexData() {
      getIndexStatictics({}).then(res => {
        this.data.signingRate = res.data.signingRate;
        this.data.focusAgencyRate = res.data.focusAgencyRate;
        this.data.performanceRate = res.data.performanceRate;
        this.data.focusPerformanceRate = res.data.focusPerformanceRate;

        this.initChart('main3', this.chart3, this.getOption(this.data.signingRate, '签约率'));
        this.initChart('main4', this.chart4, this.getOption1(this.data.focusAgencyRate, '重点人群签约率'));
        this.initChart('main5', this.chart5, this.getOption(this.data.performanceRate, '履约率'));
        this.initChart('main6', this.chart6, this.getOption1(this.data.focusPerformanceRate, '重点人群履约率'));
      });
    },
    async getData() {
      try {
        const [homeRes, signatureRes] = await Promise.all([
          getHomeStatistics(),
          getLastYear()
        ]);

        const homeData = homeRes?.data || {};
        const signatureData = signatureRes?.data || {};

        // 基础数据设置
        this.data.useRate = homeData.filingUseRate || '0';
        this.data.filingRate = homeData.filingRate || '0';

        // 初始化基础图表
        this.initChart('main1', this.chart1, this.getOption(this.data.filingRate, '建档率'));
        this.initChart('main2', this.chart2, this.getOption1(this.data.useRate, '档案使用率'));

        // 处理排名数据
        if (homeData.archivesRates?.length) {
          const rankingData = {
            orgName: homeData.archivesRates.map(item => item.orgName),
            filingRate: homeData.archivesRates.map(item => item.filingRate),
            useRate: homeData.archivesRates.map(item => item.useRate),
            name: ['建档率', '档案使用率']
          };
          this.initChart('main8', this.chart8, this.getWorldPopulationOption(rankingData));
        }

        // 处理年度趋势数据
        const processTrendData = (homeData.intoTheYearPersons || []).map(item => ({
          time: item.time,
          totalPut: item.totalPut,
          SignaturePut: signatureData[item.time]?.sign_count || 0
        }));

        const trendChartData = {
          time: processTrendData.map(d => d.time),
          totalPut: processTrendData.map(d => d.totalPut),
          SignaturePut: processTrendData.map(d => d.SignaturePut)
        };

        this.initChart('main10', this.chart10, this.getMain11Option(trendChartData));
      } catch (error) {
        console.error('数据获取失败:', error);
        // 这里可以添加错误处理逻辑，例如显示错误提示
      }
    },

    async getRanking() {
      let res = await getRankings();
      if (res.data.length > 0) {
        const its = {
          orgName: [],
          filingRate: [],
          useRate: [],
          name: ['签约率', '重点人群签约率']
        };
        res.data.forEach(item => {
          its.orgName.push(item['dept_name']);
          its.filingRate.push(item.focusAgencyRate);
          its.useRate.push(item.signingRate);
        });
        this.initChart('main9', this.chart9, this.getWorldPopulationOption(its));
      }
    }


  },
  beforeDestroy() {
    if (this.chart1) {
      this.chart1.dispose();
    }
    if (this.chart2) {
      this.chart2.dispose();
    }
    if (this.chart3) {
      this.chart3.dispose();
    }
    if (this.chart4) {
      this.chart4.dispose();
    }
    if (this.chart5) {
      this.chart5.dispose();
    }
    if (this.chart6) {
      this.chart6.dispose();
    }
    if (this.chart7) {
      this.chart7.dispose();
    }
    if (this.chart8) {
      this.chart8.dispose();
    }
    if (this.chart9) {
      this.chart9.dispose();
    }
    if (this.chart10) {
      this.chart10.dispose();
    }
    if (this.chart11) {
      this.chart11.dispose();
    }
  }
};
</script>
<style scoped>
.center-img {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  margin-top: 5px;
  font-size: 16px;
}


.dashboard {
  padding: 20px;
}


.chart-container {
  /*border: red 1px solid;*/
  padding: 10px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.chart-item {
  position: relative;
  text-align: center;
}

.chart-label {
  margin-top: 10px;
  font-size: 14px;
  color: #606266;
}
</style>
